<template>
  <div class="view-toolbar">
    <div class="toolbar-header">
      <h3>视图控制</h3>
      <button @click="toggleToolbar" class="toggle-btn">{{ isCollapsed ? '+' : '−' }}</button>
    </div>
    <div v-show="!isCollapsed" class="toolbar-content">
      <!-- 视图模式 -->
      <div class="control-group">
        <label>视图模式：</label>
        <select v-model="selectedViewMode" @change="changeViewMode" class="select-input">
          <option value="3D">3D视图</option>
          <option value="2D">2D地图</option>
          <option value="CV">哥伦布视图</option>
        </select>
      </div>
      
      <!-- 相机控制 -->
      <div class="control-group">
        <label>相机高度：</label>
        <input 
          v-model.number="cameraHeight" 
          type="range" 
          min="100" 
          max="50000" 
          step="100" 
          @input="updateCameraHeight"
          class="range-input"
        />
        <span class="value-display">{{ formatHeight(cameraHeight) }}</span>
      </div>
      
      <!-- 地图图层控制 -->
      <div class="control-group">
        <label>底图样式：</label>
        <select v-model="selectedBasemap" @change="changeBasemap" class="select-input">
          <option value="imagery">卫星影像</option>
          <option value="terrain">地形</option>
          <option value="osm">OpenStreetMap</option>
          <option value="dark">暗色主题</option>
        </select>
      </div>
      
      <!-- 显示选项 -->
      <div class="control-group">
        <div class="checkbox-group">
          <label class="checkbox-label">
            <input 
              v-model="showTerrain" 
              type="checkbox" 
              @change="toggleTerrain"
            />
            <span>显示地形</span>
          </label>
          <label class="checkbox-label">
            <input 
              v-model="showAtmosphere" 
              type="checkbox" 
              @change="toggleAtmosphere"
            />
            <span>显示大气</span>
          </label>
          <label class="checkbox-label">
            <input 
              v-model="enableLighting" 
              type="checkbox" 
              @change="toggleLighting"
            />
            <span>启用光照</span>
          </label>
        </div>
      </div>
      
      <!-- 快速导航 -->
      <div class="control-group">
        <label>快速导航：</label>
        <div class="nav-buttons">
          <button @click="flyToLocation('beijing')" class="nav-btn">北京</button>
          <button @click="flyToLocation('shanghai')" class="nav-btn">上海</button>
          <button @click="flyToLocation('global')" class="nav-btn">全球</button>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="control-group">
        <button @click="resetView" class="action-btn primary">重置视图</button>
        <button @click="saveView" class="action-btn secondary">保存视图</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  cesiumManager?: any
}

defineProps<Props>()

const emit = defineEmits<{
  resetView: []
  flyToLocation: [location: string]
  changeViewMode: [mode: string]
  changeBasemap: [basemap: string]
  updateCameraHeight: [height: number]
  toggleTerrain: [enabled: boolean]
  toggleAtmosphere: [enabled: boolean]
  toggleLighting: [enabled: boolean]
  saveView: []
}>()

// 响应式数据
const isCollapsed = ref(false)
const selectedViewMode = ref('3D')
const selectedBasemap = ref('imagery')
const cameraHeight = ref(10000)
const showTerrain = ref(true)
const showAtmosphere = ref(true)
const enableLighting = ref(true)

// 预设位置
const locations = {
  beijing: { longitude: 116.397, latitude: 39.909, height: 10000 },
  shanghai: { longitude: 121.473, latitude: 31.230, height: 10000 },
  global: { longitude: 0, latitude: 0, height: 15000000 }
}

// 方法
const toggleToolbar = () => {
  isCollapsed.value = !isCollapsed.value
}

const changeViewMode = () => {
  emit('changeViewMode', selectedViewMode.value)
}

const changeBasemap = () => {
  emit('changeBasemap', selectedBasemap.value)
}

const updateCameraHeight = () => {
  emit('updateCameraHeight', cameraHeight.value)
}

const toggleTerrain = () => {
  emit('toggleTerrain', showTerrain.value)
}

const toggleAtmosphere = () => {
  emit('toggleAtmosphere', showAtmosphere.value)
}

const toggleLighting = () => {
  emit('toggleLighting', enableLighting.value)
}

const flyToLocation = (location: string) => {
  emit('flyToLocation', location)
}

const resetView = () => {
  emit('resetView')
}

const saveView = () => {
  emit('saveView')
}

const formatHeight = (height: number): string => {
  if (height >= 1000) {
    return `${(height / 1000).toFixed(1)}km`
  }
  return `${height}m`
}

// 暴露方法给父组件
defineExpose({
  setViewMode: (mode: string) => {
    selectedViewMode.value = mode
  },
  setCameraHeight: (height: number) => {
    cameraHeight.value = height
  }
})
</script>
